define(['jquery','backbone','collections/menus','models/menu'
        	,'jqueryui','jeditable','bootstrap'
        	,'jquerynoty'
            ,'jquerynoty_default_theme',
            'jquerynoty_center_layout'],function($,Backbone,Menus,Menu){
	var MenuView=Backbone.View.extend({
		initialize:function(){	
			this.rootMenus=this.options.rootMenus;
			this.prefijoSubmenus="submenu_";
		},
		render:function(){
			this.$el.css("height","100%").css("border","border:5px solid red");
			this.renderMenus(null,this.rootMenus,this.$el);	
		},
		loadAndRenderHijos:function(menu){
			var that=this;
			var idContenedor=this.prefijoSubmenus+menu.get("id");
			var menusHijos=new Menus();
			menusHijos.fetch({
				data:{id_padre:menu.get("id"),_method:'get'},
				success:function(){
					that.renderMenus(menu,menusHijos,$("#"+idContenedor));					
				}
			});
			menu.setMenus(menusHijos);
		},
		renderMenus:function(menuPadre,menus,$divPadre){
			var that=this;
			$divPadre.css("height","100%").css('width',"100%");				
			//Pegamos la coleccion de menus al evento change del modelo Menu
			menus.on('change',function(menu){
				menu.save();
			});
			
			menus.on('add',function(menu){
				if(menuPadre!=null){
					that.loadAndRenderHijos(menuPadre);
				}else{
					
				}
			}).on('destroy',function(menu){
				that.loadAndRenderHijos(menuPadre);
			});
			
			
			
			$divPadre.html("");
			var divSeccion=$(document.createElement("div")).css('width','100%');			
			var that=this;
			menus.forEach(function(menu){
				menu.setPadre(menuPadre);
			    that.crearSeciconAcordion(menu,divSeccion);			    
			});		
			$divPadre.append(divSeccion);		
		},
		crearSeciconAcordion:function(menu,divPadre){
			
			var that=this;	
			var widthSeccion="99%";
			
			var $divSeccion=$(document.createElement("div"))
				.attr("id",menu.get("id"))
					.data('abierto',false).addClass('seccion').hide();	
			$divSeccion.addClass("ui-widget-content ui-corner-all").width(widthSeccion);
			$divSeccion.css("margin","0 auto 0 auto");
			
			var $divSubmenus=$(document.createElement("div"))
				.attr("id",this.prefijoSubmenus+menu.get("id"));			
		    
			/*cuando hago click al titulo o encabezado hago un lazy loading para el menu y submenus */
			var $encabezado=$(document.createElement("div"))
				.html("<h4 style='display:inline;text-decoration:underline' class='titulo'>"+'Menu '+menu.get('titulo').toLowerCase()+"</h4>")
				.css("border","1px solid");
			
			$encabezado.append("<i class='icon-chevron-down small'></i>");
			
			$encabezado.append("<a class='eliminar pull-right' style='cursor:pointer' >eliminar</a>");
								
			var $tituloSeccion=$encabezado.find("h4[class=titulo]").click(function(){
				//evita que se recarguen los datos cuando se da click para cerrar el acordion
				//valida que la seccion del acordion no este abierta para recargar los datos
				if(!$divSeccion.data('abierto')){
					that.loadAndRenderHijos(menu);	
					$divSeccion.siblings('div[class*=seccion]').hide().data('abierto',false);
				}			
				//Si estaba abierto se pasa a cerrado (false) si no a abierto (true)
				$divSeccion.data('abierto',!$divSeccion.data('abierto'));
				$divSeccion.toggle();
				
			}).css("cursor","pointer");		
				
			$encabezado.find('a[class*=eliminar]').click(function(e){
				noty({
					  text: 'Esta seguro?', 
					  buttons: [
					    {addClass: 'btn btn-primary', text: 'Ok', onClick: function($noty) {
					        // this = button element
					        // $noty = $noty element
					    	$(this).tooltip('hide');
							menu.destroy({wait:true,error:function(){
								noty({text:'Verifique que el menu no tiene hijos antes de borrar','type':'error'});
							}});
					        $noty.close();					       
					      }
					    },
					    {addClass: 'btn btn-danger', text: 'Cancelar', onClick: function($noty) {
					        $noty.close();
					      
					      }
					    }
					  ]
					});				
			}).tooltip({title:'Eliminar'});
			
			
		 	//Inicializo tabla con datos del menu
			var $tablaDatosMenu=$("<table><col width='20%'><col width='20%'><tr><th>Titulo</th><th>Identificador</th><th>Link</th><th>Publicado</th><tr></table>")
				.attr("border",1)
				.attr("width","100%")
				.addClass("table table-condensed");
			
			
			//Para cada uno de los campos modificables se genera un td y se aplica una accion cuando el campo se modifique
			var $inputTitulo=$(document.createElement("td")).html(menu.get('titulo'))
				.editable(function(value,settings){
					menu.set('titulo',value);
					$tituloSeccion.html(value);
					return(value);
				}).width(widthSeccion);
			
			var $inputIdentificador=$(document.createElement("td")).html(menu.get('identificador'))
			.editable(function(value,settings){
				menu.set('identificador',value);
				return(value);
			}).width(widthSeccion);
			
			var $inputLink=$(document.createElement("td")).html(menu.get('link'))
				.editable(function(value,settings){
					menu.set('link',value);
					return(value);
				});
			
			
			
			var $ckbActivo=$(document.createElement("input"))
				.attr("type","checkbox")
				.attr("checked",menu.get("publicado")==1?true:false)
				.click(function(){
					if(this.checked){
						menu.set("publicado",1);
					}else{
						menu.set("publicado",0);
					}
				});		
			
			var $templateAgregarMenu=$("<div>Nombre:<input class='nombre_menu' type='text'/>Link<input class='link_menu' type='text'/><a href='#'>agregar menu</a></div>");
			$templateAgregarMenu.find('a').click(function(){
				var ptitulo=$templateAgregarMenu.find('input[class=nombre_menu]').val();
				var plink=$templateAgregarMenu.find('input[class=link_menu]').val();		
			
				menu.menus.create({
					titulo:ptitulo,
					link:plink,
					id_padre:menu.id
				},{wait:true});
				
			});
			
			var $inputCkbActivo=$("<td></td>").append($ckbActivo);
			var $filaDatosMenu=$("<tr></tr>");
			$filaDatosMenu.append($inputTitulo);
			$filaDatosMenu.append($inputIdentificador);
			$filaDatosMenu.append($inputLink);
			$filaDatosMenu.append($inputCkbActivo);
			$tablaDatosMenu.append($filaDatosMenu);
			//La seccion contiene todos los elementos relacionados a un menu	
			$divSeccion.append($tablaDatosMenu);
			$divSeccion.append($templateAgregarMenu);
			$divSeccion.append($divSubmenus);
			divPadre.append($encabezado);
			divPadre.append($divSeccion);
			//Agrego los eventos al final por que es necesario que los elementos esten en el dom
			
			
		}
	});	
	return MenuView;
});